<template>
  <div class="form_box">
    <el-form :model="dataForm" :rules="dataFormRules" ref="dataForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="code" prop="code">
        <el-input v-model="dataForm.code"></el-input>
      </el-form-item>

      <!-- n -->
      <el-form-item label="描述" prop="content">
        <el-input v-model="dataForm.content"></el-input>
      </el-form-item>

      <el-form-item label="ptype" prop="ptype">
        <PermissionTypeSelect 
            :showTitle="false" 
            @onDataChanged="onPTSelectChanged"             
            ref="permissionTypeSelect"></PermissionTypeSelect>
      </el-form-item>

      <!-- 确认 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm()" :loading="loading">立即更新</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

import {getPermissionInitApi,permissionEditSaveApi} from '@/manager-core/api/permission/permission'

import { PermissionTypeSelect } from '@/manager-core/component/select'


export default defineComponent({
  name: 'PermissionEdit',

  components: {
    PermissionTypeSelect
  },


  data(){
    return {      
      dataForm : {
        id: '' as any,
        content: '',
        code: '',
        ptypeK: ''
      },
      dataFormRules: {
        content: [
          {required:true,message: '请输入content',trigger: 'blur'}
        ],
        code: [
          {required:true,message: '请输入code',trigger: 'blur'}
        ],
        ptypeK: [
          {required:true,message: '请输入ptype',trigger: 'blur'}
        ]
      },
      loading : false      
    }
  },

  methods:{
    init(){
      if(this.loading){
        return
      }

      this.loading = true;

      getPermissionInitApi(this.dataForm.id)
        .then((r:any)=>{
          this.dataForm.content = r.content;
          this.dataForm.code = r.code;

          // 初始化ptypeK
          // console.log("r.ptypeK",this.permissionTypeSelect,r.ptypeK)
          // this.setPTypeData(r.ptypeK);

          this.$nextTick(()=>{
            this.setPTypeData(r.ptypeK);
          })
          
          // pts.setData(r.ptypeK);

        })
        .finally(()=>{
            this.loading = false;
        })
      
    },

    submitForm(){

      (this.$refs['dataForm'] as any)
      .validate((valid:any)=>{
        if(valid){
          // 验证通过
          console.log("submitForm success")
          this.loading = true;

          permissionEditSaveApi(this.dataForm)
            .then(()=>{
                ElMessage.success("更新成功！");
            })
            .finally(()=>{
              this.loading = false;              
            })


        }
        else{
          // 未验证通过
          ElMessage.error("未通过表单验证，请检查表单项");
        }
      })
    },

    onPTSelectChanged(val:any){
        this.dataForm.ptypeK = val;
    },

    
  },

  

  mounted(){
    let id = this.$route.query.id;
    if(!id){
      alert("页面错误，请刷新")
    }
    else {
      this.dataForm.id = id;
      this.init();
    }
  },

  created(){
    
  },

  setup(){
    const permissionTypeSelect  = ref(null) as any

    const setPTypeData = (val:any) =>{
      // console.log("set up ",permissionTypeSelect.value.setData)
      permissionTypeSelect.value.setData(val);
    }

    return {
      permissionTypeSelect,
      setPTypeData
    }
  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

</style>
